<template>
      <div id="Application">
       <!-- 游戏区域 -->
       <div class="container">
        <!-- 底部挡板 -->
        <div class="board" :style="{ left: boardX + 'px' }"></div>
        <!-- 弹球 -->
        <div class="ball" :style="{ left: ballX + 'px', top: ballY + 'px' }"></div>
        <!-- 游戏结束提示 -->
        <h1 v-if="fail" style="text-align: center;">游戏失败</h1>
       </div>
      </div>
     </template>
    <script>
     export default {
      data() {
       return {
        // 控制挡板位置
        boardX: 0,
        // 控制弹球位置
        ballX: 0,
        ballY: 0,
        // 控制弹球移动速度
        rateX: 0.1,
        rateY: 0.1,
        // 控制结束游戏提示的展示
        fail: false
       };
      },
      // 组件生命周期函数，组件加载时会调用
      mounted() {
       // 添加键盘事件
       this.enterKeyup();
       // 随机弹球的运动速度和方向
       this.rateX = Math.random() * 0.5 + 0.1;
       this.rateY = Math.random() * 0.5 + 0.1;
       // 开启计数器，控制弹球移动
       this.timer = setInterval(() => {
        // 到达右侧边缘进行反弹
        if (this.ballX + this.rateX >= 440 - 30) {
         this.rateX *= -1;
        }
        // 到达左侧边缘进行反弹
        if (this.ballX + this.rateX <= 0) {
         this.rateX *= -1;
        }
        // 到达上侧边缘进行反弹
        if (this.ballY + this.rateY <= 0) {
         this.rateY *= -1;
        }
        this.ballX += this.rateX;
        this.ballY += this.rateY;
        // 失败判定
        if (this.ballY >= 440 - 30 - 10) {
         // 挡板接住了弹球，进行反弹
         if (this.boardX <= this.ballX + 30 && this.boardX + 80 >= this.ballX) {
          this.rateY *= -1;
         } else {
          // 没有接住弹球，游戏结束
          clearInterval(this.timer);
          this.fail = true;
         }
        }
       }, 2);
      },
      methods: {
       // 控制挡板移动
       keydown(event) {
        if (event.key === "ArrowLeft") {
         if (this.boardX > 10) {
          this.boardX -= 20;
         }
        } else if (event.key === "ArrowRight") {
         if (this.boardX < 440 - 80) {
          this.boardX += 20;
         }
        }
       },
       enterKeyup() {
        document.addEventListener("keydown", this.keydown);
       }
      }
     };
     </script>
    <style>
     body {
      margin: 0;
      padding: 0;
     }
     .container {
      position: relative;
      margin: 0 auto;
      width: 440px;
      height: 440px;
      background-color: blanchedalmond;
     }
     .ball {
      position: absolute;
      width: 30px;
      height: 30px;
      left: 0px;
      top: 0px;
      background-color: orange;
      border-radius: 30px;
     }
     .board {
      position: absolute;
      left: 0;
      bottom: 0;
      height: 10px;
      width: 80px;
      border-radius: 5px;
      background-color: red;
     }
     </style>